<template>
	
	<view class="item  between" :class="{'t-flex':flex}">
		<view class="key c3 bold f30" :class="{'must':required}">{{title}} <text class="f24 c9" v-if="tips">{{tips}}</text>：</view>
		<view  :class="{'right':flex,'t-flex':flex,'mt20':!flex}">
			<slot />
		</view>
	</view>
	
	
</template>

<script setup>
	
	defineProps({
		title:{
			type:String,
			default:'名称'
		},
		required:{
			type:Boolean,
			default:false
		},
		flex:{
			type:Boolean,
			default:true
		},
		tips:{
			type:String,
			default:''
		}
	})
	
</script>

<style scoped lang="scss">
	.item{
		padding: 28rpx 0;
		border-bottom: 1px solid #f6f6f6;
		.right{
			width: 70%;
			justify-content: flex-end;
		}
		.key.must{
			&:before{
				content:"*";
				color:red;
			}
		}
	}
	
	
	
</style>